<template>
  <common-page
    :common-ins="commonIns"
    :search-bar-data="searchBarData"
    :action-bar-data="actionBarData"
    :columns="columns"
  ></common-page>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { onMounted, ref, watch } from 'vue';

import $api from '@/api';
import { useCommon } from '@/hooks/common';
import CommonPage from '@/pages/common/page/index.vue';

import { ACTION_BAR_DATA, COLUMNS, SEARCH_BAR_DATA } from './constants';

const API = $api.system.operationlog;

const searchBarData = ref([...SEARCH_BAR_DATA]);
const actionBarData = ref([...ACTION_BAR_DATA]);
const columns = ref(...[COLUMNS]);
const commonIns = useCommon({
  API,
  formatSearch: (data: Recordable) => {
    if (data.createdAt.length) {
      const date = data.createdAt;
      data.createdAt = [
        dayjs(`${date[0]} 00:00:00`).format('YYYY-MM-DD HH:mm:ss'),
        dayjs(`${date[1]} 23:59:59`).format('YYYY-MM-DD HH:mm:ss'),
      ];
    }
    return data;
  },
});

watch(commonIns.selectedRowKeys, (val) => {
  actionBarData.value[0].disabled = !val.length;
});
const getEnums = async () => {
  const manager = await $api.system.manager.list();

  const options = manager.items.map((v: Recordable) => {
    return {
      label: v.username,
      value: v.username,
    };
  });
  searchBarData.value[0].options = options;
};

onMounted(() => {
  getEnums();
});
</script>
